@font-face {
  font-family: 'Noto Sans Light';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Noto Sans Light'), local('NotoSans-Light'),
       url('./fonts/NotoSans-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans Regular'), local('NotoSans-Regular'),
       url('./fonts/NotoSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans Arabic Light';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Noto Sans Arabic Light'), local('NotoSansArabic-Light'),
       url('./fonts/NotoSansArabic-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans Arabic Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans Arabic Regular'), local('NotoSansArabic-Regular'),
       url('./fonts/NotoSansArabic-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans CJK KR Light';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Noto Sans CJK KR Light'), local('NotoSansCJKkr-Light'),
       url('./fonts/NotoSansCJKkr-Light.otf') format('opentype');
}

@font-face {
  font-family: 'Noto Sans CJK KR Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans CJK KR Regular'), local('NotoSansCJKkr-Regular'),
       url('./fonts/NotoSansCJKkr-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Noto Sans Devanagari Light';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Noto Sans Devanagari Light'), local('NotoSansDevanagari-Light'),
       url('./fonts/NotoSansDevanagari-Light.ttf') format('opentype');
}

@font-face {
  font-family: 'Noto Sans Devanagari Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans Devanagari Regular'), local('NotoSansDevanagari-Regular'),
       url('./fonts/NotoSansDevanagari-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans Gujarati Light';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Noto Sans Gujarati Light'), local('NotoSansGujarati-Light'),
       url('./fonts/NotoSansGujarati-Regular.ttf') format('truetype');/* is missing */
}

@font-face {
  font-family: 'Noto Sans Gujarati Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans Gujarati Regular'), local('NotoSansGujarati-Regular'),
       url('./fonts/NotoSansGujarati-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans Gurmukhi Light';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Noto Sans Gurmukhi Light'), local('NotoSansGurmukhi-Light'),
       url('./fonts/NotoSansGurmukhi-Regular.ttf') format('truetype'); /* is missing */
}

@font-face {
  font-family: 'Noto Sans Gurmukhi Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans Gurmukhi Regular'), local('NotoSansGurmukhi-Regular'),
       url('./fonts/NotoSansGurmukhi-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans Hebrew Light';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Noto Sans Hebrew Light'), local('NotoSansHebrew-Light'),
       url('./fonts/NotoSansHebrew-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans Hebrew Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans Hebrew Regular'), local('NotoSansHebrew-Regular'),
       url('./fonts/NotoSansHebrew-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans JP Light';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Noto Sans JP Light'), local('NotoSansJP-Light'),
       url('./fonts/NotoSansCJKjp-Light.otf') format('opentype');
}

@font-face {
  font-family: 'Noto Sans JP Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans JP Regular'), local('NotoSansJP-Regular'),
       url('./fonts/NotoSansCJKjp-Regular.otf') format('opentype');
}

body {
  background: var(--main-bg-color);
  color: var(--main-color);
  font-family: 'Noto Sans Regular', 'Noto Sans Arabic Regular',
    'Noto Sans CJK KR Regular',
    'Noto Sans Devanagari Regular',
    'Noto Sans Gujarati Regular', 'Noto Sans Gurmukhi Regular',
    'Noto Sans Hebrew Regular',
    'Noto Sans JP Regular';
}

.darwin .darwin-hidden,
.linux .linux-hidden,
.freebsd .linux-hidden,
.openbsd .linux-hidden,
.store .store-hidden {
  display: none;
}

.hidden {
  display: none !important;
}

a {
  cursor: pointer;
}

/* https://css-tricks.com/html5-progress-element/ */
progress {
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  width: min(50vw, 50vh);
}

progress[value]::-webkit-progress-bar {
  background: transparent;
  border: 0.5px solid #bcbcbc;
  border-radius: 3px;
}

progress[value]::-webkit-progress-value {
  background-color: #cecece;
  border-radius: 3px;
}

/* https://www.codexworld.com/create-simple-css-tooltip/ */
.tooltip {
  display: inline-block;
  position: relative;
}

.tooltip .tiptext {
  background-color: black;
  border-radius: 3px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  color: #fff;
  padding: 6px 4px;
  position: absolute;
  text-align: center;
  visibility: hidden;
  z-index: 1;
}

.tooltip .tiptext::after {
  border-style: solid;
  border-width: 5px;
  content: "";
  position: absolute;
}

.tooltip:hover .tiptext {
  visibility: visible;
}

.tooltip.top .tiptext{
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip.top .tiptext::after{
  border-color: #2E2E2E transparent transparent transparent;
  left: 50%;
  margin-left: -5px;
  top: 100%;
}

/* https://jsbin.com/itejak/1/edit?html,css,output */
input[type="checkbox"], input[type="radio"] {
  display: none;
}

input[type="checkbox"] + label:before {
  background: var(--checkbox-bg);
  border: 0 solid rgba(0,0,0,0.20);
  border-radius: 3px;
  box-shadow: var(--checkbox-shadow);
  content: "\00a0";
  display: inline-block;
  font: 13px sans-serif;
  height: 14px;
  line-height: 16px;
  margin: 0 4px 0 0;
  padding:0;
  width: 14px;
}

body[dir=rtl] input[type="checkbox"] + label:before {
  margin: 0 0 0 4px;
}

.darwin input[type="checkbox"] + label:before {
  font: 12px sans-serif;
}

.win32 input[type="checkbox"] + label:before {
  font: 11px sans-serif;
}

input[type="checkbox"]:checked + label:before {
  background: var(--checkbox-checked-bg);
  color: #FFFFFF;
  content: "\2714";
  text-align: center;
}

.win32 input[type="checkbox"]:checked + label:before {
  content: "\2713";
}

input[type="radio"] + label:before {
  background: var(--checkbox-bg);
  border: 0 solid rgba(0,0,0,0.20);
  border-radius: 13px;
  box-shadow: var(--checkbox-shadow);
  content: "\00a0";
  display: inline-block;
  font: 13px sans-serif;
  height: 16px;
  margin: 0 4px 0 0;
  padding:0;
  width: 16px;
}

body[dir=rtl] input[type="radio"] + label:before {
  margin: 0 0 0 4px;
}

input[type="radio"]:checked + label:before {
  background: var(--checkbox-checked-bg);
  color: #FFFFFF;
  content: "\25CF";
  text-align: center;
}

input[type="radio"]:disabled + label {
  color: rgba(255,255,255,0.99);
}

input[type="range"] {
  margin: 0 16px 0 13px;
  vertical-align: middle;
  width: 200px;
}

body[dir=rtl] input[type="range"] {
  margin: 0 13px 0 16px;
}

/* https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling#Selects_and_datalists */
.has-select {
  display: inline-block;
  margin-left: 4px;
  min-width: 200px;
  position: relative;
}

body[dir=rtl] .has-select {
  margin-left: 0;
  margin-right: 4px;
}

.has-select::after {
  color: #FFFFFF;
  content: "⌄";
  pointer-events: none;
  position: absolute;
  right: 3px;
}

body[dir=rtl] .has-select::after {
  left: 3px;
  right: auto;
}

.has-select::before {
  background: var(--has-select-before-bg);
  border-radius: 0 3px 3px 0;
  content: "";
  height: 19px;
  pointer-events: none;
  position: absolute;
  right: 0;
  width: 16.5px;
}

body[dir=rtl] .has-select::before {
  left: 0;
  right: auto;
}

select {
  appearance: none;
  -webkit-appearance: none;
  color: var(--select-color);
  background: var(--select-bg);
  border: var(--select-border);
  border-radius: 3px 0 0 3px;
  box-shadow: var(--select-shadow);
  font-family: sans-serif;
  height: 19px;
  padding-left: 8px;
  width: 100%;
}

body[dir=rtl] select {
  padding-left: 0;
  padding-right: 8px;
}

select option {
  color: var(--select-color);
  background: var(--select-option-bg) ;
}

select:focus {
  outline: none;
}

button {
  background: var(--button-bg-color);
  border: 0 solid rgba(0,0,0,0.15);
  border-radius: 3px;
  box-shadow: var(--button-shadow);
  color: var(--button-color);
  font-size: 13px;
  letter-spacing: -0.08px;
  padding: 2px 12.5px;
  text-align: center;
}

button:focus {
  outline: none;
}

button:hover {
  cursor: pointer;
}

button:active {
  background-image: linear-gradient(180deg, #84bffb 0%, #1a88ff 100%);
  border-radius: 3.5px;
  box-shadow: 0 0 0 0 rgba(0,0,0,0.15);
  color: #FFFFFF;
}

.push {
  background: var(--button-push-bg);
  border-radius: 3.5px;
  box-shadow: var(--button-push-shadow);
  color: #FFFFFF;
}

hr {
  background: var(--hr-bg-color);
  border: 0 solid rgba(0,0,0,0.20);
  height: 2px;
}
